<template>
  <div style="padding:50px;">
    高德地图
    <div id="container" style="width:500px; height:500px;"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    window.onLoad = function() {
      var map = new AMap.Map("container", {
        zoom: 15, //放大级别
        center: [113.3245904, 23.1066805], //中心点坐标
        viewMode: "3D" //使用3D视图
      });
      //   添加点标记
      var marker = new AMap.Marker({
        position: [113.3245904, 23.1066805],
        offset: new AMap.Pixel(-100, -100),
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
        title: "这里就是广州塔"
      });
      map.add(marker); //添加到地图
      //   异步调用插件
      AMap.plugin("AMap.ToolBar", function() {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
    };

    var key = "1f7b99bcbc0fafd07edf3cc145d2b355";
    var url = `https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback=onLoad`;
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  }
};
</script>

<style>
</style>